<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>修改密码</title>
    <!-- 采用绝对路径导入css文件 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/index.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css"/>
    <!-- 采用绝对路径导入jquery文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ocupload-1.1.2.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <%--统计字数--%>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/startMonitor.js"></script>

    <c:if test="${param.user_id==sessionScope.user.id}">
        <c:set var="back_href"
               value="${pageContext.request.contextPath }/manager/homeCostServlet?action=page&pageSize=4&pageNo=1"/>
    </c:if>
    <c:if test="${param.user_id!=sessionScope.user.id}">
        <c:set var="back_href"
               value="${pageContext.request.contextPath }/manager/userServlet?action=page&pageSize=4&pageNo=1"/>
    </c:if>

    <script type="text/javascript">
        $(function () {

            if("${param.user_id}"!=="${sessionScope.user.id}"){
                $("#ori-password").attr("hidden","hidden")
            }

            //将alert设置成异步代码，防止阻塞页面显示
            if ("${param.msg}" === "0") {
                setTimeout('alert("修改成功")', 10)
                location.href = "${back_href}"
            } else if ("${param.msg}" === "1") {
                setTimeout('alert("修改失败，原密码错误")', 10)
            }

            $("#submit-btn").click(function () {

                let originalPassword = $("#original-password").val();
                let passwordPatt = /^\w{5,20}$/;
                if (!passwordPatt.test(originalPassword)&&"${param.user_id}"==="${sessionScope.user.id}") {
                    alert("原密码不合法(5-20位)");
                    return false;
                }


                let passwordText = $("#new-password").val();
                if (!passwordPatt.test(passwordText)) {
                    alert("密码不合法(5-20位)");
                    return false;
                }
                let repwdVal = $("#repeat-password").val();
                if (repwdVal !== passwordText) {
                    alert("两次密码不一致");
                    return false;
                }

            })

        })
    </script>



</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#0099ff" fill-opacity="1"
          d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
<div id="header">
    <span class="wel_word">修改密码</span>
</div>

<div id="main">
    <form action="${pageContext.request.contextPath }/manager/userServlet" method="get">
        <input type="hidden" name="action" value="updatePassWord">
        <input type="hidden" name="user_id" value="${param.user_id}">
        <div style="position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;width: 30%;height: 60%">
            <div class="mb-3" id="ori-password">
                <label for="original-password" class="form-label">原密码</label>
                <input type="password" class="form-control" id="original-password" name="original-password"
                       placeholder="原密码">
            </div>
            <div class="mb-3">
                <label for="new-password" class="form-label">新密码</label>
                <input type="password" class="form-control" id="new-password" name="new-password" placeholder="新密码">
            </div>
            <div class="mb-3">
                <label for="repeat-password" class="form-label">确认密码</label>
                <input type="password" class="form-control" id="repeat-password" name="repeat-password"
                       placeholder="确认密码">
            </div>
            <input id="submit-btn" type="submit" class="btn btn-primary btn-lg" value="保存"
                   style="margin: 20px 0;float: left"/>
            <a id="back" class="btn btn-primary btn-lg"
               href="${back_href}"
               style="margin: 20px;float: left">返回</a>
        </div>

    </form>
</div>

</body>
</html>